<script setup lang="ts">
import {shallowRef, markRaw, ref, watch, onMounted} from 'vue'
import {permsJudg} from '@/util';
import {useWindowResize} from "@/hooks/useWindowReSize.ts";

const {height} = useWindowResize();

// 使用 shallowRef 来存储组件
const currentComponent = shallowRef<any>(null)
const currentTab = ref<string>('basic')
const componentMap = {
  basic: () => import('./components/basic.vue'),
  customer: () => import('./components/customer.vue'),
  withdrawal: () => import('./components/withdrawal.vue'),
  sms: () => import('./components/sms.vue'),
  policy: () => import('./components/policy.vue'),
  about_us: () => import('./components/about.vue'),
  storageFile: () => import('./components/storageFile.vue')
}
//判断当前设置权限是否存在
const hasPermission = (value: string) => {
  return permsJudg(value);
}
// 加载组件
const loadComponent = async (key: string) => {
  if (!key || !componentMap[key]) {
    currentComponent.value = null
    return
  }
  try {
    const comp = await componentMap[key]()
    currentComponent.value = markRaw(comp.default)
  } catch (error) {
    console.error('加载组件失败:', error)
    currentComponent.value = null
  }
}
// 监听组件变化
watch(currentTab, async (newKey) => {
  if (newKey) {
    await loadComponent(newKey)
  } else {
    currentComponent.value = null
  }
})
onMounted(() => {
  loadComponent(currentTab.value)
})
</script>

<template>
  <n-card>
    <n-tabs type="line" v-model:value="currentTab" class="m-b-10">
      <n-tab name="basic" v-if="hasPermission('setting:basic')">
        基本设置
      </n-tab>
      <n-tab name="customer" v-if="hasPermission('setting:customer')">
        客服设置
      </n-tab>
      <n-tab name="withdrawal" v-if="hasPermission('setting:withdrawal')">
        提现设置
      </n-tab>
      <n-tab name="sms" v-if="hasPermission('setting:sms')">
        短信设置
      </n-tab>
      <n-tab name="policy" v-if="hasPermission('setting:policy_a')">
        政策协议
      </n-tab>
      <n-tab name="about_us" v-if="hasPermission('setting:policy_a')">
        关于我们
      </n-tab>
      <n-tab name="storageFile" v-if="hasPermission('setting:storage')">
        腾讯COS
      </n-tab>
    </n-tabs>
    <div class="scrollbar" :style="{maxHeight:(height)+'px',overflow:'auto'}">
      <component :is="currentComponent"/>
    </div>
  </n-card>
</template>

<style lang="scss">
.titles {
  font-weight: 500;
}

</style>